<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 70%; width: 70% }
    </style>
	<script type="text/javascript" src="js/jquery.min.js">
	</script>
	
	<script type="text/javascript">
	(function($) {
		$.fn.photomatic = function(options) {
			var settings = $.extend({
				transform: function(name) {
						return name.replace(/_small/, '');
					},
				photoDisplay: 'img',
				delay: 2000
			}, options || {});
			
			settings.images = $(this);
			settings.count = $(this).length;
			settings.index = 0;
			
			show = function(index) {
				if (index < 0) {
					settings.index = settings.count - 1;
				} else if (index >= settings.count) {
					settings.index = 0;
				} else {
					settings.index = index;
				}
				$(settings.photoDisplay).attr('src', settings.transform(settings.images[settings.index].src));
				settings.images.css('opacity', 0.4);
				settings.images.eq(settings.index).css('opacity', 1.0);
			}
			
			settings.images.each(function(n) {
				$(this).data('photo-index', n);
			}).click(function() {
				show($(this).data('photo-index'));
			});
			
			$(settings.next).click(function(event) {
				show(settings.index+1);
			});
			
			$(settings.prev).click(function(event) {
				show(settings.index-1);
			});
			
			$(settings.first).click(function(event) {
				show(0);
			});
			
			$(settings.last).click(function(event) {
				show(settings.count-1);
			});
			
			show(0);
			
			$(settings.play).toggle(function(event) {
				this.src = settings.pauseImage;
				settings.tick = window.setInterval(function() {
					$(settings.next).triggerHandler('click');
				}, settings.delay)
			}, function(event) {
				window.clearInterval(settings.tick);
				this.src = settings.playImage;
			});
			
			return this;
		};
	})(jQuery);
		
	</script>
	
	<script type="text/javascript">
	$(function() {
		$('body').css('text-align', 'center');
		$('#smallImages').height(130);
		$('#photoPane img').height(400);
				
		$('#smallImages img').photomatic({
			photoDisplay: '#photoPane img',
			next: '#next',
			prev: '#prev',
			first: '#first',
			last: '#last',
			play: '#play',
			playImage: 'images/play.JPG',
			pauseImage: 'images/pause.JPG',
			delay: 1000
		});
	});
	</script>
  </head>
  <body>
    <div id="smallImages">
		<img src="images/DSC1_small.JPG" />
		<img src="images/DSC2_small.JPG" />
		<img src="images/DSC3_small.JPG" />
		<img src="images/DSC4_small.JPG" />
		<img src="images/DSC5_small.JPG" />
		<img src="images/DSC6_small.JPG" />
	</div>
	
	<div id="photoPane">
		<img src="" />
	</div>
	
	<div id="navigationBar">
		<img src="images/first.JPG" id="first" />
		<img src="images/prev.JPG" id="prev" />
		<img src="images/play.JPG" id="play" />
		<img src="images/next.JPG" id="next" />
		<img src="images/last.JPG" id="last" />
	</div>
  </body>
</html>